<!--
 * @Description: 文件描述
 * @Version: 1.0
 * @Author: YueXuanzi
 * @Date: 2024-09-12 01:56:28
 * @LastEditors: YueXuanzi
 * @LastEditTime: 2024-10-08 11:33:31
 * @心得体会: 无
-->
<template>
    <div class="flex justify-center items-center w-full bg-blue-400" style="height: 100vh;">
        <div class="flex bg-light-600 overflow-hidden p-7 w-96" style="border-radius: 5px;" v-show="!adminShow">
            <div class="flex-1 flex justify-center items-center">
                <el-form :model="reForm" class="w-70 min-w-70" :role="roles" ref="formRef" >
                    <div class="text-center text-2xl font-bold m-5">欢迎注册医院管理系统</div>
                    <el-form-item prop="phonenumber">
                        <el-input placeholder="请输入电话" v-model="reForm.phonenumber">
                            <template #prefix> <el-icon><Lock/></el-icon> </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="captcha">
                        <el-input placeholder="请输入验证码" v-model="reForm.code">
                            <template #append>
                                <el-button @click="getCaptchaX()" :disabled="getloading">
                                    <span v-if="!getloading">发送验证码</span>
                                    <span v-else>验证中({{ countdown }}秒)</span>
                                </el-button> 
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="w-full" @click.prevent="handleRegister()">
                            确 认
                        </el-button>
                    </el-form-item>
                    <div class="flex">
                        <div class="flex-1 text-right text-blue-400 cursor-pointer" @click="router.back()">返回登录</div>
                    </div>
                </el-form>
            </div>
        </div>
        <div class="flex bg-light-600 overflow-hidden p-7 w-96" style="border-radius: 5px;" v-show="adminShow">
            <el-form :model="regiterForm" class="w-70 min-w-70" :role="roles" ref="formRef2">
                <div class="text-center text-2xl font-bold m-5">欢迎注册医院管理系统</div>
                <el-form-item prop="name" label="昵称">
                    <el-input placeholder="请输入昵称" v-model="regiterForm.name">
                        <template #prefix> <el-icon><User/></el-icon></template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password" label="密码">
                    <el-input placeholder="请输入密码" v-model="regiterForm.password" show-password>
                        <template #prefix> <el-icon><Lock/></el-icon></template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="sex" label="性别">
                    <el-radio-group v-model="regiterForm.sex">
                        <el-radio label="男" value = "0"></el-radio>
                        <el-radio label="女" value = "1"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item prop="email" label="邮箱">
                    <el-input placeholder="请输入邮箱" v-model="regiterForm.email" type="email">
                        <template #prefix> <el-icon><Mail/></el-icon></template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="profile" label="简介">
                    <el-input placeholder="简介" v-model="regiterForm.profile">
                    </el-input>
                </el-form-item>
                <el-form-item prop="phonenumber" label="电话">
                    <el-text >{{ regiterForm.phonenumber }}</el-text>
                </el-form-item>
                <el-form-item prop="remark" label="备注">
                    <el-input placeholder="备注" v-model="regiterForm.remark">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button :loading="loading" type="primary" class="w-full" @click.prevent="handleRegisterX()">
                        <span v-if="!loading">注 册</span>
                        <span v-else>注册中...</span>
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from 'vue-router'
import { getCaptcha, yun, register } from "@/api/sys/regiter.js";
import { ElMessage, ElNotification } from 'element-plus'
const router = useRouter()
let reForm = reactive({
    phonenumber: '',
    code: ''
})
const regiterForm = reactive({
    name:"",
    phonenumber: '',
    password: '',
    sex: '',
    email: '',
    profile: '',
    remark: ''
})

const adminShow = ref(false)
const formRef = ref({})
const formRef2 = ref({})
// 查验电话号码
const roles = {
    phonenumber: [
        { required: true, message: '不能为空', trigger: 'blur' },
    { min: 11, max: 51, message: '长度为11字符', trigger: 'blur' },
]
}

const loading = ref(false)
const getloading = ref(false)
let timer = null
let countdown = ref(60)
// 发送验证码
const getCaptchaX =  () => {
    console.log("获取验证码")
    getCaptcha(reForm.phonenumber).then(res => {
        if(res.code === 200){
            ElMessage.success("已成功发送信息，请注意查收！！！")
        }
    })
    // 进行倒计时
    getloading.value = true
    if (!timer) {
        timer = setInterval(() => {
            if (countdown.value > 0 && countdown.value <= 60) {
                countdown.value -= 1;
                getloading.value = true;
                if (countdown.value !== 0) {
                    getloading.value = true
                } else {
                    clearInterval(timer);
                    countdown.value = 60;
                    timer = null;
                    getloading.value = false;
                }
            }
        }, 1000);
    }
}


const handleRegister = () => {
    console.log(reForm)
    yun(reForm).then(res => {
        if(res.code === 200){
            ElNotification({
                title:'验证成功',
                message:'请及时进行注册',
                type:'success',
                duration:2000
            })
            adminShow.value = true
            regiterForm.phonenumber = reForm.phonenumber
        }
    })
}
const handleRegisterX = () => {
    try {
        loading.value = true
        register(regiterForm).then(res=>{
            if(res.code === 200){
                ElNotification({
                    title:'注册成功',
                    message:'欢迎回来',
                    type:'success',
                    duration:2000
                })
                loading.value = false
                router.push('/login')
            }
        })
        
    }catch(error){
        console.log(error)
    }
}
</script>

<style scoped>

</style>